<template>
    <div class="address-list">
        <yx-header>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               地址列表
            </template>
            <template #right>
               <span @click="$router.push('/addAddress')">新建地址</span>
            </template>
        </yx-header>
        <!-- 滑动单元格 -->
        <van-swipe-cell v-for="item,index in list" :key="index">
        <van-checkbox v-model="item.isDefault" checked-color="#ee0a24"></van-checkbox>
        <section>
            <p>{{item.linkMan}} {{item.mobile}}</p>
            <p>{{item.address}}</p>
        </section>
        <van-icon name="share" />
        <template #right>
            <van-button square type="danger" text="删除" @click="del(item.id)"/>
            
        </template>
        </van-swipe-cell>

    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'

import { Notify,Toast } from 'vant';
import {useRouter} from 'vue-router'
import {getAddressList,delAddress} from '@/utils/second'
export default {
    setup(props) {
        const data = reactive({
            list:[]
        })
    //    获取地址列表的方法
        const getList =()=>{
            getAddressList({token:localStorage.getItem('token')}).then(res=>{
                console.log(res);
                data.list = res.data
            })
        }
        // 调用getList
        getList()

        const del=(id)=>{
            delAddress({token:localStorage.getItem('token'),id:id}).then(res=>{
                   console.log(res);
                   if(res.code==0){
                      Toast('删除地址成功')
                    //   刷新页面
                       getList()
                   }
            })
        }
        return {...toRefs(data),del,getList}
    },
    components:{
        yxHeader
    }
}
</script>
<style lang="scss" scoped>
:deep(.van-swipe-cell__wrapper){
   display: flex;
   padding: 10px 16px;
   align-items: center;
   border-bottom: 1px solid #eee;
   section{
    flex:1;
    margin-left:10px;
   }
}
.van-button--danger{
    height: 100%;
}
</style>
